<template>
  <view class="content">
    <image src="/static/medicine/banner_skincare.png" class="banner-image"></image>
    <view class="goods-list">
      <view v-for="(item, index) in medicineList" :key="index" class="goods-item" @click="navToDetailPage(item.id)">
        <view class="image-wrapper">
          <image :src="item.pic.split(',')[0]" mode="aspectFit"></image>
        </view>
        <text class="title clamp">{{item.name}}</text>
        <text class="title2">{{item.sku}}</text>
        <text class="title2" v-if="item.indicativeFunctions.length<=40">{{item.indicativeFunctions}}</text>
        <text class="title2" v-if="item.indicativeFunctions.length>40">{{item.indicativeFunctions.substring(0,40)}}</text>
        <view class="price-box">
          <text class="price">{{item.actualSalesUnitPrice}}</text>
          <text class="m-price">¥{{item.price}}</text>
          <text>已售 {{item.salesVolume}}</text>
        </view>
      </view>
    </view>
    <uni-load-more :status="loadingType"></uni-load-more>

  </view>
</template>

<script>

import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import {listMedicine} from "@/api/medicine/medicine";
export default {
  components: {
    uniLoadMore
  },
  data() {
    return {
      loadingType: 'more', //加载更多状态
      searchParam: {
        pageNum: 1,
        pageSize: 6
      },
      medicineList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        pic: null,
        price: null,
        actualSalesUnitPrice: null,
        indicativeFunctions: null,
        usagAndDosage: null,
        pharmacyId: null,
        sku: null,
        shippingFee: null,
        manufacturingEnterprise: null,
        drugIngredients: null,
        contraindications: null,
        drugShape: null,
        adverseReactions: null,
        interact: null,
        storageConditions: null,
        packages: null,
        dosageForm: null,
        precautions: null,
        approvalNo: null,
        typeId: null,
        inventory: null,
        salesVolume: null,
        dateOfManufacture: null,
        periodOfValidity: null,
        lastUpdateTime: null,
        state: null,
        sort: null,
        deletedFlag: null,
        status: null,
        pastDue: null
      },
      typeId: null,

    };
  },

  onLoad(options) {
    this.typeId = options.typeId
    this.queryParams.typeId = this.typeId
    this.loadData();
  },
  //下拉刷新
  onPullDownRefresh() {
    this.loadData('refresh');
  },
  //加载更多
  onReachBottom() {
    this.searchParam.pageNum++;
    this.loadData();
  },
  methods: {
    //加载商品 ，带下拉刷新和上滑加载
    async loadData(type = 'add', loading) {
      //没有更多直接返回
      if (type === 'add') {
        if (this.loadingType === 'nomore') {
          return;
        }
        this.loadingType = 'loading';
      } else {
        this.loadingType = 'more'
      }

      if (type === 'refresh') {
        this.searchParam.pageNum=1;
        this.medicineList = [];
      }
      listMedicine(this.queryParams).then(res => {
        let medicineList = res.data.rows;
        if (res.data.rows.length === 0) {
          //没有更多了
          this.loadingType = 'nomore';
          this.searchParam.pageNum--;
        } else {
          if (res.data.rows.length < this.searchParam.pageSize) {
            this.loadingType = 'nomore';
            this.searchParam.pageNum--;
          } else {
            this.loadingType = 'more';
          }
          this.medicineList = this.medicineList.concat(medicineList);
        }
        if (type === 'refresh') {
          if (loading == 1) {
            uni.hideLoading()
          } else {
            uni.stopPullDownRefresh();
          }
        }
        this.medicineList = res.data.rows
      })
    },
    //详情
    navToDetailPage(id) {
      uni.navigateTo({
        url: `/pages/shop/detail?id=${id}`
      })
    },
    stopPrevent() {}
  },
}
</script>

<style lang="scss">
page,
.content {
  background: $page-color-base;
}
.banner-image{
  width: 100%;
}
.section-tit {
  font-size: $font-base+2upx;
  color: $font-color-dark;
  //background: #fff;
  background: $page-color-base;
  margin-top: 16upx;
  text-align: center;
  padding-top: 20upx;
  padding-bottom: 20upx;
}
.m-price {
  margin: 0 12upx;
  color: $font-color-light;
  text-decoration: line-through;
}
/* 商品列表 */
.goods-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0 30upx;
  background: $page-color-base;

  .goods-item {
    display: flex;
    flex-direction: column;
    width: 48%;
    padding-bottom: 40upx;

    &:nth-child(2n+1) {
      margin-right: 4%;
    }
  }

  .image-wrapper {
    width: 100%;
    height: 330upx;
    border-radius: 3px;
    overflow: hidden;
    background-color: #fff;

    image {
      width: 100%;
      height: 100%;
      opacity: 1;
    }
  }

  .title {
    font-size: $font-lg;
    color: $font-color-dark;
    line-height: 50upx;
  }

  .title2 {
    font-size: $font-sm;
    color: $font-color-light;
    line-height: 1.5;
    margin-bottom: 10upx;

    &:last-child {
      margin-bottom: 0; // 最后一个.title2不需要底部间距
    }
  }

  .price-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 10upx;
    font-size: 24upx;
    color: $font-color-light;
  }

  .price {
    font-size: $font-lg;
    color: $uni-color-primary;
    line-height: 1;

    &:before {
      content: '￥';
      font-size: 26upx;
    }
  }
}
</style>
